<template>
  <div class="category">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <!-- 菜单栏 -->
          <el-col :span="7">
            <goodsList></goodsList>
          </el-col>
          <!-- 展示 -->
          <el-col :span="17">
            <el-card class="box-card3">
              <div slot="header" class="clearfix">
                <span>{{itemName}}</span>
              </div>
              <div v-for="(item,index) in categoryList" :key="index" class="text item cartItem" @click="showDetail(item)">
                <!--          <div :style="'background-image:url('+img+')'" class="cardImg"></div>-->
                <div class="cardImg">
                  <img :src="item.imgUrl" alt />
                </div>
                <div class="cartDetail">
                  <div class="cartName">{{item.cname}}</div>
                  <div class="block">
                    <el-rate v-model="item.start" disabled></el-rate>
                  </div>
                  <div class="cartPrice">{{`￥`+item.price}}</div>
                  <div class="btnG">
                    <el-button class="cartCol" icon="el-icon-star-on"></el-button>
                    <el-button class="cartShop" type="danger" icon="el-icon-shopping-cart-2">加入购物车</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="rightItem">
      <right></right>
    </div>
  </div>
</template>

<script>
import goodsList from "~/components/goodsList.vue";
import topBar from '~/components/topBar.vue'
import right from "~/components/right.vue";
import * as categoryRequest from '../../assets/category/detail';
export default {
  components: {
    goodsList,
    right,
    topBar
  },
  data() {
    return {
      itemName:'',
      categoryList:[],
    };
  },

  computed:{
    getItemName(){
      console.log(this.$route.query.name)
      return this.$route.query.name
    }
  },

  watch:{
    getItemName(val){
      this.itemName = val
      categoryRequest.getCategoryInfo(this);
    }
  },
  methods: {
    showDetail(item){
      console.log(item)
      this.$router.push({
        path: '/category/detail',
        query:{category: item.id}
      })
    }
  },
  async mounted() {
    this.itemName = this.$route.query.name;
    categoryRequest.getCategoryInfo(this);
  }
};
</script>

<style lang="less">
.category {
  margin-bottom: 30px;
  position: relative;
  .box-card1 {
    height: 180px;
    border-radius: 12px;
    .textItem {
      width: 50px;
      height: 60px;
    }
  }
  .box-card2 {
    margin: 18px 0px;
    height: 55px;
    border-radius: 12px;
    .el-button {
      padding: 0px 5px;
      border: none;
    }
  }
  .box-card3 {
    border-radius: 10px;
     /*margin-top: 20px;*/
    .el-card__body {
      padding: 0px;
    }
    .demonstration {
      padding-left: 20px;
    }
    .cartItem {
      display: inline-block;
      border: 1px solid #ddd;
      height: 360px;
      transition: all 0.3s ease-in-out 0s;

      .cardImg {
        width: 259px;
        padding:50px;

        img {
          width: 160px;
          height: 150px;
          cursor: pointer;
        }
      }

      .cartDetail {
        text-align: center;

        div {
          margin-bottom: 10px;
        }

        .cartName:hover {
          color: #be1e13;
          cursor: pointer;
        }

        .cartPrice {
          color: red;
          height: 34px;
        }

        .btnG {
          display: none;

          .cartCol {
            padding: 5px 10px;

            i {
              font-size: 20px;
              color: red;
            }
          }

          .cartShop {
            padding: 8px 10px;
            margin: 0;
          }
        }
      }
    }
  }
  .rightItem {
    position: absolute;
    right: 10px;
    top: 100px;
  }
}
</style>
